<p>demo works!</p>
<label for="color">Color: </label>
<input id="color" type="text" [formControl]="colorControl" />
<br />
<br />
<!-- <form [formGroup]="form">
  <label for="name">姓名: </label>
  <input id="name" formControlName="name" />
  <div *ngIf="form.get('name')?.errors" class="alert">请输入姓名!</div>
  <br />
  <label for="tel">电话: </label>
  <input formControlName="tel" id="tel" />
  <div *ngIf="form.get('tel')?.errors?.['minlength']" class="alert">电话号码长度不得小于11!</div>
  <div *ngIf="form.get('tel')?.errors?.['maxlength']" class="alert">电话号码长度不得超过11!</div>
</form> -->
<form [formGroup]="form">
  <label for="name">姓名: </label>
  <input id="name" formControlName="name" />
  <div *ngIf="form.get('name')?.errors" class="alert">请输入姓名!</div>
  <br />
  <label for="tel">电话: </label>
  <input formControlName="tel" id="tel" />
  <div *ngIf="form.get('tel')?.errors?.['length']" class="alert">
    电话号码长度必须是11位!
  </div>
</form>
<section>
  <button (click)="submit()">提交</button>
</section>

<br />
<br />
<br />

<form [formGroup]="pwdForm">
  <label for="pwd">密码: </label>
  <input id="pwd" formControlName="pwd" />
  <div *ngIf="pwdForm.get('pwd')?.errors?.['required']" class="alert">
    请输入密码!
  </div>
  <div *ngIf="pwdForm.get('pwd')?.errors?.['remote']" class="alert">
    {{pwdForm.get('pwd')?.errors?.['remote']}}
  </div>
  <br />
  <label for="confirmPwd">确认密码: </label>
  <input formControlName="confirmPwd" id="confirmPwd" />
  <div
    *ngIf="pwdForm.get('confirmPwd')?.dirty && pwdForm.errors?.['not-confirm']"
    class="alert"
  >
    两次密码输入不一致!
  </div>
</form>
